<template>
  <div id="calendarinfo">
    <div class="fs_header  white text-center font16">
        梵舍管家
    </div>

    <section class="calendarInfo">
        <ul class="calendartitle fs_flex">
            <li @click="searchOrder('stay');act='stay'" class="calendarlist fs_flex1 text-center" :class="{act:act=='stay'}">   待确认
            </li>
            <li @click="searchOrder('already');act='already'" class="calendarlist fs_flex1 text-center"  :class="{act:act=='already'}">
                入住
            </li>
            <li @click="searchOrder('Evaluated');act='Evaluated'" class="calendarlist fs_flex1 text-center"  :class="{act:act=='Evaluated'}" >
                退房
            </li>
        </ul>
        <section class="calendarlistinfo" v-show="act=='stay'">
            <div class="homeList">
                <ul>
                  <li class="fs_flex border_blue padding10" v-for="(item,index) in hostOrderLists">
                    <router-link :to="{path:'/hostOrderDetail',query:{orderId:item.orderId,calendarType:1,parentUrl:'/calendarInfo'}}" class="fs_flex">
                            <div class="fs_flex2"><img v-bind:src="baseUrl+item.thumbUrl"></div>
                            <div class="fs_flex8 black">
                                <p>{{item.roomTitle}}</p>
                                <p>{{item.checkinTime|time}}至{{item.checkoutTime|time}}</p>
                              <p>{{item.userName}}<span v-show="item.mobileNo&&item.mobileNo!=''">({{item.mobileNo}})</span></p>
                            </div>
                      </router-link>
                  </li>
                </ul>
            </div>
        </section>

        <section class="calendarlistinfo" v-show="act=='already'">
            <div class="homeList">
                <ul>
                  <li class="fs_flex padding10" v-for="(item,index) in hostOrderLists">
                    <router-link :to="{path:'/hostOrderDetail',query:{orderId:item.orderId,calendarType:2,parentUrl:'/calendarInfo'}}" class="fs_flex">
                      <div class="fs_flex2"><img v-bind:src="baseUrl+item.thumbUrl"></div>
                      <div class="fs_flex8 black">
                        <p>{{item.roomTitle}}</p>
                        <p>{{item.checkinTime|time}}至{{item.checkoutTime|time}}</p>
                        <p>{{item.userName}}<span v-show="item.mobileNo&&item.mobileNo!=''">({{item.mobileNo}})</span></p>
                      </div>
                    </router-link>
                  </li>
                </ul>
            </div>
        </section>

        <section class="calendarlistinfo" v-show="act=='Evaluated'">
             <div class="homeList">
                <ul>
                  <li class="fs_flex padding10" v-for="(item,index) in hostOrderLists">
                    <router-link :to="{path:'/hostOrderDetail',query:{orderId:item.orderId,calendarType:3,parentUrl:'/calendarInfo'}}" class="fs_flex">
                      <div class="fs_flex2"><img v-bind:src="baseUrl+item.thumbUrl"></div>
                      <div class="fs_flex8 black">
                        <p>{{item.roomTitle}}</p>
                        <p>{{item.checkinTime|time}}至{{item.checkoutTime|time}}</p>
                        <p>{{item.userName}}<span v-show="item.mobileNo&&item.mobileNo!=''">({{item.mobileNo}})</span></p>
                      </div>
                    </router-link>
                  </li>
                </ul>
            </div>
        </section>
    </section>

    <ul class="fs_footer"  >
        <li @click="handleChange('forwardRoom')" value="forwardRoom" :class="{isact:hostbottomNav=='forwardRoom' }">远期房态</li>
        <li @click="handleChange('roomlist')" value="roomlist"  :class="{isact:hostbottomNav=='roomlist' }" >管家日历</li>
        <li @click="handleChange('myself')" value="myself"  :class="{isact:hostbottomNav=='myself' }">我</li>
    </ul>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'calendarinfo', //组件的名字
        data() {
            return { //数据
                msg: '管家日历状态列表',
                act: 'stay',
                baseUrl: $.hsf.baseUrl,
                dateString:null
            }
        },
        methods: { //方法
            ...mapMutations(['sethostbottomNav']),
            ...mapActions(['getHostOrderInfoList']),
            handleChange(val) { //点击底部的变化
                this.sethostbottomNav(val)
                    //  this.bottomNav = val
                if (val == 'roomlist') {
                    this.$router.push({
                        path: '/host'
                    })
                } else if (val == 'forwardRoom') {
                    this.$router.push({
                        path: '/forwardRoom'
                    })
                } else if (val == 'myself') {
                    this.$router.push({
                        path: '/hostmyself'
                    })
                }
            },
          searchOrder(type){
            let orderStatus='4';
            let checkinStartDate, checkinEndDate, checkoutStartDate,checkoutEndDate;
            this.hostOrderLists.splice(0,1);
            let orderReq={};
            let dateString = this.dateString;
            if("stay"==type){
              orderStatus='4';
              orderReq = {"orderStatus":orderStatus,"rows":100};
            }else if("already"==type){
              orderStatus='5';
              if(dateString){
                checkinStartDate=dateString;
                checkinEndDate = dateString;
                orderReq = {"orderStatus":orderStatus,"rows":100,"checkinStartDate":dateString,"checkinEndDate":dateString};
              }else{
                orderReq = {"orderStatus":orderStatus,"rows":100};
              }
            }else if("Evaluated"==type){
              orderStatus='6';
              if(dateString){
                checkoutStartDate=dateString;
                checkoutEndDate = dateString;
                orderReq = {"orderStatus":orderStatus,"rows":100,"checkoutStartDate":dateString,"checkoutEndDate":dateString};
              }else{
                orderReq = {"orderStatus":orderStatus,"rows":100};
              }
            }
            this.getHostOrderInfoList(orderReq)
          }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['hostbottomNav','hostOrderLists'])

        },
        mounted: function() { //组件加载完成
          //一进页面查询待确认订单
          var that = this;
          var dateString = this.$route.query.dateString;
          var billType = this.$route.query.billType;
          this.dateString = dateString;
          if(billType && dateString){
            that.searchOrder(billType)
            that.act = billType;
          }else{
            let orderReq = {"orderStatus":4,"rows":100};
            this.getHostOrderInfoList(orderReq)
          }
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }

    }
</script>
<style scoped lang="scss">
    .calendarInfo{
        margin-top: 10px;
        .calendarlist{
            height: 40px;
            line-height: 40px;
            color:black;
            border:1px solid #ccc;
        }
        .calendarlistinfo li{
            border:1px solid #5b9bd5;
        }
        .act {
            color: white !important;
            background-color: #5b9bd5;
        }
    }
    .homeList ul li{
      margin-bottom:20px;
    }
    .homeList ul li:last-child{
      margin-bottom: 50px;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
